'use client'
import Link from 'next/link'
import { useRouter } from 'next/navigation'

import { User } from '@/service/models/UserModel'
import { useUserStore } from '@/store/UserStore'

import { Button } from '../ui/button'

interface NavBarProps {
  user: User
}

function NavBar({ user }: NavBarProps) {
  useUserStore.setState({ user })
  const router = useRouter()
  const handleLogout = async () => {
    const res = await fetch('/api/auth/logout', {
      method: 'POST',
    })
    const data = await res.json()
    if (data.success) {
      return router.push('/login')
    }
  }

  return (
    <div className="bg-primary text-primary-foreground">
      <div className="container flex justify-between items-center">
        <div>
          <Link href="/protected/dashboard">Home</Link>
          <Link className="ml-2" href="/protected/about">
            About
          </Link>
        </div>

        <div>
          <span>{user.name}</span>
          <Button onClick={handleLogout}>Logout</Button>
        </div>
      </div>
    </div>
  )
}

export default NavBar
